<ion-header>
  <ion-navbar color="primary">
    <ion-title >
      待办事项
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-left (click)="addTask()">
        <ion-icon name="add"></ion-icon>
      
      </button>
    </ion-buttons>
    
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list>
<ion-item-sliding #slidingItem *ngFor="let task of tasks">
  <ion-item [ngClass]="{'task_done' : task.status == 'done'}">{{task.title}}</ion-item>
  
  <ion-item-options side="right" (ionSwipe)="removeTask(slidingItem,task)">
    <button ion-button icon-only color="secondary" (click)="markAsDone(slidingItem,task)">
      <ion-icon name="checkmark"></ion-icon>
    </button>
    <button ion-button icon-only expandable color="danger" (click)="removeTask(slidingItem,task)">
      <ion-icon name="trash"></ion-icon>
    </button>
  </ion-item-options>

</ion-item-sliding>

 </ion-list>
</ion-content>
